<template>
  <div class="hello">
    <div
       v-if="list[1].htmlIframe"
       class="html-class"
       :style="{
    	 width: list[1].htmlSize.width,
    	 height: list[1].htmlSize.height,
    	 top: list[1].htmlSize.top,
    	 border: '0px',
       }"
    >
       <div class="gifLoad" v-if="list[2].loadingInfo">
    	  <img src="html_img/gif.gif"/>
       </div>
       <!-- <div class="closeWin"  v-if="!list[2].loadingInfo" v-show="list[1].htmlSize.id!=0">
    	 <el-button circle @click="close" class="clickclose"><span class="textstyle" >X</span></el-button>
       </div> -->
       <iframe
    	v-if="!list[2].loadingInfo"
    	 ref="iframeInfo"
    	 style="width: 100%; height: 100%; border: none"
    	 :src="list[1].htmlSize.srcHtml + '?serial=' + list[1].serial"
       >
       </iframe>
    </div>
	<div
	   v-if="list[0].htmlIframe"
	   class="html-class"
	   :style="{
		 width: list[0].htmlSize.width,
		 height: list[0].htmlSize.height,
		 top: list[0].htmlSize.top,
		 right:'0px' ,
		 border: '0px',
	   }"
	>
	   <div class="gifLoad" v-if="list[2].loadingInfo">
		  <img src="html_img/gif.gif"/>
	   </div>
	   <!-- <div class="closeWin"  v-if="!list[2].loadingInfo" v-show="list[1].htmlSize.id!=0">
		 <el-button circle @click="close" class="clickclose"><span class="textstyle" >X</span></el-button>
	   </div> -->
	   <iframe
		v-if="!list[2].loadingInfo"
		 ref="iframeInfo"
		 style="width: 100%; height: 100%; border: none"
		 :src="list[0].htmlSize.srcHtml + '?serial=' + list[0].serial+'&id=' + list[0].id"
	   >
	   </iframe>
	</div>
  </div>
</template>

<script>
import eventBus from "@/js/eventBus";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
     list:[
		  {
			  htmlIframe:false,
			  htmlIfype:true,
			  serial:"",
			  id:"",
			  htmlSize: {
				width: "450px",
				height:"80%",
				top: "110px",
				id:0,
				srcHtml:
				  "../../../static/3dweb/index.html#/main/system/elevatorRight",
			  },
		  },
		  {
			  htmlIframe:true,
			  htmlIfype:true,
			  serial:"",
			  htmlSize: {
				width: "450px",
				height:"80%",
				top: "110px",
				id:0,
				srcHtml:
				  "../../../static/3dweb/index.html#/main/system/useroom",
			  },
		  },
		  {
			loadingInfo: true,    
		  },
		  {
			  "aa":false
		  },
		  {
			videoShow: false, 
			videoSize: {
			  width: "400px",
			  height: "80%",
			  top: "110px",
			},
		  },
		  {
			  CapacityQueriesRL:false,
		  }
		],
    };
  },
  mounted() {
	eventBus.on('areadata', (data)=>{
		console.log("设备基本信息",data.serial)
		this.list[1].serial=data.serial+"&type="
		this.list[0].serial=data.serial
		this.list[0].id=data.id
	    this.clickButton("设备基本信息")
	})
	eventBus.on('fuweixtmenuBnt', ()=>{
		console.log("复位复位")
		this.close()
	})
  	setTimeout((_) => {
  	  this.list[2].loadingInfo=false
	  this.list[1].serial= this.parseQueryString().serial+"&type="
  	}, 800);
	setTimeout((_) => {
	  // this.clickButton("设备基本信息")
	}, 4800);
  },
  methods:{
	parseQueryString() {
		var stret =decodeURI(window.location.href)
		stret = stret.split('?')
		// urlert
		 if(stret.length>1){
			stret=stret[1]
		 }
		  
		 if (stret) {
			stret = stret.split('&')
		 }
		  
		 var pmserty={}
		 for (var i = 0; i < stret.length; i++) {
			var lite=stret[i].split("=")
			  pmserty[lite[0]]=lite[1]
		 }
		 if(pmserty.serial){
			if(pmserty.serial.indexOf("#/")!=-1){
				pmserty.serial=pmserty.serial.substring(0, pmserty.serial.length - 2)
			} 
		 }
		console.log('处理跳转携带的参数0',pmserty)
		return pmserty
	},
	close() {
		console.log("点击了关闭弹窗")
		this.list[0].htmlIframe=false
		this.list[2].loadingInfo=true
		this.list[1].serial= this.parseQueryString().serial+"&type="
		this.list[1].htmlSize={
				width: "450px",
				height:"80%",
				top: "110px",
				id:0,
				srcHtml:
				  "../../../static/3dweb/index.html#/main/system/useroom",
			  }
		setTimeout((_) => {
		  this.list[2].loadingInfo=false
		}, 800);
	},
	clickButton(data) {
		this.list[2].loadingInfo=true
		if (data == "设备基本信息") {
			this.list[0].htmlIframe=true
			this.list[1].htmlSize = {
			 width: "450px",
			 height:"80%",
			 top: "110px",
			  srcHtml: "../../../static/3dweb/index.html#/main/system/elevatorLeft",
			};
		  }
	  if (data == "告警") {
	    this.list[1].htmlSize = {
	      width: "100%",
	      height: "92%",
			id:1,
			top: "110px",
	      srcHtml: "../../../static/3dweb/index.html#/main/alarm/index",
	    };
	  }
	  if (data == "资产查询") {
	    this.list[1].htmlSize = {
	      width: "450px",
	      height: "80%",
			id:2,
			top: "110px",
			// srcHtml: "/static/3dweber/index.html#/main/statistics/right",
	      srcHtml: "../../../static/3dweb/index.html#/main/statistics/right",
	    };
	  }
		if (data == "云图") {
		  this.list[1].htmlSize = {
		    width: "450px",
		    height: "24%",
			id:2,
			top: "110px",
		    srcHtml: "../../../static/3dweb/index.html#/main/environmentalAnalysis/index",
		  };
		}
		this.list[1].htmlIframe = true;
		setTimeout((_) => {
		  this.list[2].loadingInfo=false
		}, 800);
		console.log("点击了那个",this.list[1])
	}  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.html-class {
    position: absolute;
	z-index: 999999999;
  }
.closeWin {
   width:30px;
   height:30px;
   background: white;
   border-radius: 50%;
   position: absolute;
   right: 24px;
   top: 12px;
	 z-index: 999999999999999;
  }
  .closeWiner {
     width:30px;
     height:30px;
     background: white;
     border-radius: 50%;
     position: absolute;
     right: 24px;
     top: 12px;
  	 z-index: 999999999999999;
    }
  .clickclose{
    width:30px;
    height:30px;
    background: white;
    right:5px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    /* // position: absolute; */
    .textstyle{
      padding-top:7px;
      display: block;
      color: black;
    }
   
  }
</style>
